<template>
	<view class="bar-content">
		<view class="barItem" v-for="(barItem,index) in recommendBar" :key="index">
			<view class="barItem-bar " :class="{'barItem-bg-img':!barItem.dynamicList}" @tap.stop="$CHS.goBarHome(barItem.id, barItem.blacklist)">
				<view class="flex-r ac">
					<lazy-image class="bar-img" :src="barItem.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar"
						fit="cover"></lazy-image>
					<view class="barItem-bar-content flex-c">
						<text class="barItem-title">{{barItem.title}}</text>
						<text
							class="barItem-num">{{barItem.num}}&nbsp;粉丝&nbsp;|&nbsp;{{barItem.latestReleaseNum}}&nbsp;帖子</text>
					</view>
				</view>
			</view>
			<view class="barItem-folllow flex-r ac jc">
				<text v-if="barItem.followStatus==1" @tap.stop="$CHS.goBarHome(barItem.id, barItem.blacklist)">球吧主页</text>
				<view class=" flex-r" v-else @tap="followBar(barItem.id)">
					<image class="barItem-folllow-img" src="@/public/images/bar/gz.png" mode="aspectFit"></image>
					<text>关注</text>
				</view>
			</view>
			<view class="dynamicList" v-if="barItem.dynamicList">
				<view class="dynamicItem" v-for="(dynamicList,index) in barItem.dynamicList" :key="index" @tap="goDetail(barItem, index)">
					<view class="dynamicItem-title">
						<text class="dynamicItem-type" v-if="dynamicList.type==6">[话题帖]</text>
						<text class="dynamicItem-type" v-else>[投票帖]</text>
						<text>{{dynamicList.title}}</text>
					</view>
					<view class="dynamicItem-num">
						<text>{{dynamicList.virtualReadNum}}&nbsp;人已浏览&nbsp;|</text>
						<text class="dynamicItem-participateNum" v-if="dynamicList.type==6">{{dynamicList.participateNum}}&nbsp;人已参与讨论</text>
						<text class="dynamicItem-participateNum" v-else>{{dynamicList.readNum}}&nbsp;人已投票</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	* RecommendBarList 球吧
	* @description 用于展示球吧内容
	* @property {Array} recommendBar 用于展示球吧信息
	*  
	**/
	export default {
		name: "ch-recommendBarList",
		props: {
			recommendBar: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		methods:{
			followBar(id){
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}	
					this.$http.post({
						url:"/api/forum/user/follow",
						data:{
							id,
							status:1
						}
					}).then((data)=>{
						if(data.success){
							const barItem = this.recommendBar.find((item) => item.id === id);
							if (barItem) {
								barItem.followStatus = 1;
							}
							this.$ShowToast({text: "已关注"})
						}
					}).catch((err)=>{
						console.log(err)
					})
			},
			goDetail(barItem,index){
				console.log(barItem,'=====')
				let params = {barId: barItem.id, barName: barItem.title, barLogo: barItem.logo, type: barItem.dynamicList[index].userType || 'expert'}
				if(barItem.dynamicList[index].type==6||barItem.dynamicList[index].type==7){
					this.$CHS.goDiscussDetail(barItem.dynamicList[index].id, params)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bar-content {
		margin: 2rpx 19rpx 22rpx 20rpx;

		.barItem {
			margin-top: 20rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			border-radius: 10rpx;
			position: relative;
			.barItem-bg-img{
				-webkit-border-radius:10rpx;
			}
			.barItem-bar {
				padding: 19rpx 20rpx 19rpx 19rpx;
				background-image: url('@/public/images/bar/qbsk.png');
				background-repeat: no-repeat;
				background-size: 710rpx 144rpx;
				color: #FFECCC;
				
				.bar-img {
					border: 4rpx solid #FFECCC;
					border-radius: 50%;
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}

				.barItem-bar-content {
					margin-left: 20rpx;

					.barItem-title {
						font-size: 32rpx;
						font-weight: bold;
					}

					.barItem-num {
						font-size: 24rpx;
						font-weight: 400;
						margin-top: 18rpx;
					}
				}

			}

			.barItem-folllow {
				width: 140rpx;
				height: 60rpx;
				position: absolute;
				top: 42rpx;
				right: 20rpx;
				color: #8C631C;
				font-size: 24rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				text-align: center;

				.barItem-folllow-img {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
			.dynamicList{
				padding: 8rpx 22rpx 18rpx 19rpx;
				font-weight: 400;
				color: #333333FF;
				line-height: 48rpx;
				font-size: 32rpx;
				.dynamicItem{
					margin-top: 10rpx;
				}
				.dynamicItem-type{
					color: #3D5C99;
					margin-right: 7rpx;
				}
				.dynamicItem-num{
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					margin-bottom: 6rpx;
					.dynamicItem-participateNum{
						margin-left: 8rpx;
					}
				}
			}
		}
	}
</style>